<script lang="ts" setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {useStore} from "vuex";
import {computed, onMounted, reactive} from "vue";
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'

const store = useStore();
//获取作业
const homeWorks = computed(() => store.getters['getWork/allHomeworks']);
// 响应式数组来存放待完成作业和已提交作业
const pendingWorks = reactive([]);
const submittedWorks = reactive([]);
const gethomeWorks= ()=>{
  console.log('DDDDDDsouahdasjoidjoijsadio',homeWorks)
  pendingWorks.push(...homeWorks.value);
}

onMounted(()=>{
  gethomeWorks();
})
function commitWork(work){
  alert("作业提交成功")
  // 从待完成作业中移除
  const index = pendingWorks.findIndex(item => item.id === work.id);
  if (index !== -1) {
    pendingWorks.splice(index, 1);
  }
  // 添加到已提交作业中
  submittedWorks.push(work);
}

function loadPendingWorks() {
  // 在实际场景中，这里需要根据实际情况从后端加载数据，以下为模拟数据
  setTimeout(() => {
    // 模拟加载更多数据，假设每次加载10条
    const newWorks = [...this.pendingWorks, ...Array.from({ length: 10 }).map((_, index) => ({
      id: this.pendingWorks.length + index + 1,
      title: `作业${this.pendingWorks.length + index + 1}`,
      description: `作业内容${this.pendingWorks.length + index + 1}`,
    }))];
    this.pendingWorks = newWorks;
  }, 1000); // 模拟加载延迟
}

function loadSubmittedWorks() {
  // 在实际场景中，这里需要根据实际情况从后端加载数据，以下为模拟数据
  setTimeout(() => {
    // 模拟加载更多数据，假设每次加载10条
    const newWorks = [...this.submittedWorks, ...Array.from({ length: 10 }).map((_, index) => ({
      id: this.submittedWorks.length + index + 1,
      title: `已完成作业${this.submittedWorks.length + index + 1}`,
      description: `已完成作业内容${this.submittedWorks.length + index + 1}`,
    }))];
    this.submittedWorks = newWorks;
  }, 1000); // 模拟加载延迟
}


//统计
const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1600,
})
source.value = 38

</script>

<template>
  <div>
<!--    面包屑-->
    <div>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>作业</el-breadcrumb-item>
        <el-breadcrumb-item>个人作业</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div>
      <div class="noWork">
        <h1 style="text-align: center">待完成作业</h1>
        <div class="span_1">
          <span>作业名称</span>
          <span>作业内容</span>
          <span>成绩</span>
          <span>状态</span>
          <span>提交</span>
        </div>

        <el-scrollbar wrap-class="scrollbar-wrap">
          <div class="span_2" v-for="work in pendingWorks" :key="work.id">
            <span>{{work.title}}</span>
            <span>{{work.description}}</span>
            <span>未评分</span>
            <span>未交</span>
            <el-button class="bt1" @click="commitWork(work)">点击提交</el-button>
          </div>
          <el-infinite-scroll @load="loadPendingWorks" :distance="10">
            <span slot="no-more">没有更多了</span>
          </el-infinite-scroll>
        </el-scrollbar>
      </div>

      <div class="worked">
        <h1 style="text-align: center">已完成作业</h1>
        <div class="span_1">
          <span>作业名称</span>
          <span>作业内容</span>
          <span>成绩</span>
          <span>状态</span>
        </div>

        <el-scrollbar wrap-class="scrollbar-wrap">
          <div class="span_2" v-for="work in submittedWorks" :key="work.id">
            <span>{{work.title}}</span>
            <span>{{work.description}}</span>
            <span>未评分</span>
            <span>已交</span>
          </div>
          <el-infinite-scroll @load="loadSubmittedWorks" :distance="10">
            <span slot="no-more">没有更多了</span>
          </el-infinite-scroll>
        </el-scrollbar>
      </div>
    </div>

<!--    统计-->
    <el-row class="foot">
      <el-col :span="6">
        <el-statistic title="作业总数" :value="138" />
      </el-col>
      <el-col :span="6">
        <el-statistic :value="138">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              未提交作业数量
            </div>
          </template>
          <template #suffix>/100</template>
        </el-statistic>
      </el-col>
      <el-col :span="6">
        <el-statistic title="提交作业数量" :value="outputValue" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="学生总数" :value="10">
          <template #suffix>
            <el-icon style="vertical-align: -0.125em">
              <ChatLineRound />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.span_1 {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 20px; /* 设置间隔为20像素，可以根据需要调整 */
  background-color: rgb(240, 240, 240);
  margin-top: 10px;
}

.span_1 > span {
  flex: 1; /* 灵活的宽度，使得每个 span 均分父容器的宽度 */
  text-align: center; /* 文字居中 */
  padding: 10px; /* 内边距，可以根据需要调整 */
}

.span_2{
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 20px; /* 设置间隔为20像素，可以根据需要调整 */
  margin-top: 20px;
}
.span_2 > span {
  flex: 1; /* 灵活的宽度，使得每个 span 均分父容器的宽度 */
  text-align: center; /* 文字居中 */
  padding: 10px;
}
.bt1{
  flex: 1;
  padding-left: 0px;
  background-color: #6495ED; /* 浅蓝色 */
  color: white;
  transition: background-color 0.5s ease; /* 设置背景色变化的过渡效果，延迟0.5秒 */
}
.bt1:hover {
  background-color: #4169E1; /* 深蓝色 */
}
.worked {
  position: fixed;
  width: 100%;
  top: 400px;
}

el-col {
  text-align: center;
}
.foot {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 距离页面底部0像素 */
  left: 0; /* 距离页面左侧0像素 */
  width: 100%;
  background-color:aliceblue;
  padding: 20px; /* 内边距，根据需要调整 */
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
  z-index: 999; /* 可选：设置堆叠顺序 */
}
</style>